<div id="app" v-cloak>
    <div class="flex-row bottom10">
        <el-button @click="getList">
            <el-icon :size="15"><Refresh /></el-icon>
        </el-button>
        <el-button v-if="select!=1" type="primary" @click="handleAdd([`30%`,`50%`])">添加</el-button>
        <el-button v-if="select!=1" type="danger" @click="event=>handleDels()" :disabled="selectables.length==0?true:false">删除</el-button>
    </div>
    <div class="flex-column flex-content-center flex-item-center">
        <el-table :data="listObj.list"
                  style="width: 100%"
                  :border="true"
                  max-height="600"
                  size="default"
                  @selection-change="event=>handleSelectionChange(event)"
                  row-key="id"
        >
            <el-table-column fixed="left" type="selection" width="55" ></el-table-column>
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column  prop="category" label="类别" min-width="100" align="center"></el-table-column>
            <el-table-column  prop="url" label="地址" show-overflow-tooltip min-width="100" align="center"></el-table-column>
            <el-table-column  prop="imagewidth" label="预览" min-width="150" align="center">
                <template #default="scope">
                    <el-image
                            style="width: 32px; height: 32px"
                            :src="scope.row.url"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="[scope.row.url]"
                            show-progress
                            preview-teleported="true"
                            :initial-index="4"
                            fit="cover"
                    ></el-image>
                </template>
            </el-table-column>
<!--            <el-table-column  prop="imagewidth" label="宽度" min-width="100" align="center"></el-table-column>-->
<!--            <el-table-column  prop="imageheight" label="高度" min-width="100" align="center"></el-table-column>-->
<!--            <el-table-column  prop="imagetype" label="文件类型" min-width="150" align="center"></el-table-column>-->
<!--            <el-table-column  prop="filename" label="文件名称" min-width="150" align="center"></el-table-column>-->
            <el-table-column  prop="filesize" label="文件大小" min-width="100" align="center"></el-table-column>
            <el-table-column  prop="mimetype" label="mime类型" min-width="100" align="center"></el-table-column>
            <el-table-column  prop="storage" label="存储位置" min-width="100" align="center"></el-table-column>
            <el-table-column  prop="createtime" label="创建日期" min-width="200" align="center"></el-table-column>
            <el-table-column fixed="right"  label="操作" min-width="200" align="center">
                <template #default="scope">
<!--                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <el-button v-if="select!=1" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button v-if="select==1" size="small" type="primary" @click="handleDownload(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="flex-row top20 flex-content-end">
        <el-pagination
                background
                layout="total,sizes,prev, pager, next,jumper"
                :total="listObj.total"
                :page-size="listObj.limit"
                :page-sizes="[10, 20, 50, 100,500,1000]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>